<template>
  <div class="logistics-content">
    <h1 class="logistics-title">物流信息填报</h1>
    <el-form label-position="left" :model="ruleFormReg" :rules="rules">
      <el-form-item prop="number">
        <el-input v-model="ruleFormReg.number" placeholder="预约单号"></el-input>
      </el-form-item>
      <el-form-item prop="carNum">
        <el-input v-model="ruleFormReg.carNum" placeholder="车牌号"></el-input>
      </el-form-item>
      <el-form-item prop="contacts">
        <el-input v-model="ruleFormReg.contacts" placeholder="联系人"></el-input>
      </el-form-item>
      <el-form-item prop="mobile">
        <el-input v-model="ruleFormReg.mobile" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item prop="date">
        <el-input v-model="ruleFormReg.date" placeholder="发货日期"></el-input>
      </el-form-item>
      <el-form-item class="logistics-buttons">
        <el-button type="primary">确认</el-button>
        <el-button>取消</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Logistics',
  data () {
    return {
      ruleFormReg: {
        number: '',
        carNum: '',
        contacts: '',
        mobile: '',
        date: ''
      },
      rules: {
        number: [
          {required: true, message: '请输入预约单号', trigger: 'blur'}
        ],
        carNum: [
          {required: true, message: '请输入车牌号', trigger: 'blur'}
        ],
        contacts: [
          {required: true, message: '请输入联系人', trigger: 'blur'}
        ],
        mobile: [
          {required: true, message: '请输入联系电话', trigger: 'blur'}
        ],
        date: [
          {required: true, message: '发货日期', trigger: 'blur'}
        ]
      }
    }
  }
}
</script>
<style scoped="scoped" lang="scss">
.logistics-title {
  text-align: center;
  font-size: 20px;
}
.el-form-item {
  width: 380px;
  text-align: center;
  .el-input {
    width: 380px;
  }
}
</style>
<style lang="scss">
.logistics-content {
  width: 380px;
  margin: 0 auto;
}
.logistics-buttons {
  margin-top: 20px;
  div {
    margin: 0 auto;
  }
}
</style>
